<template>
  <div class="all">
    <div id="allmap"></div>
  </div>
</template>

<script lang="ts" setup>
import { defineComponent, onMounted } from "vue";
let map: any = null;
onMounted(() => {
  loadMapScript(); // 加载百度地图资源
});
// 初始化地图
const init = () => {
  const { BMap } = window as any; // 注意要带window，不然会报错（注意官方api,会有改动，之前是Bmap,后面3.0版本改为了BMap,最好查文档或者打印一下window）
  //初始化地图 禁用地图默认点击弹框
  map = new BMap.Map("allmap", { enableMapClick: false }); // allmap必须和dom上的id一直
  map.centerAndZoom(new BMap.Point(31.22159, 30.04206), 12); // 初始化地图,设置中心点坐标和地图级别
  //   map.setCurrentCity("成都");

  map.enableScrollWheelZoom(true);

  //创建一个图像标注实例 启用拖拽 默认为false
  const mk = new BMap.Marker(new BMap.Point(31.22159, 30.04206), {
    enableDragging: false,
  });
  map.addOverlay(mk); //将覆盖物添加到地图中
  mk.addEventListener("dragend", function (e) {
    //getAddrByPoint(e.point); //拖拽结束后调用逆地址解析函数，e.point为拖拽后的地理坐标
  });
  // 添加地图点击事件
  map.addEventListener("click", function (e) {
    console.log("点击的经纬度：" + e.point.lng + "," + e.point.lat); //
    // emits("getPoint", e.point.lng + "," + e.point.lat);
  });
};
const loadMapScript = () => {
  // 此处在所需页面引入资源就是，不用再public/index.html中引入
  var script = document.createElement("script");
  script.type = "text/javascript";
  script.className = "loadmap"; // 给script一个类名
  script.src =
    "https://api.map.baidu.com/getscript?v=3.0&ak=zs3PoLmEau9j1Y4bAdGmtfPgGf05I517";
  // 此处需要注意：申请ak时，一定要应用类别一定要选浏览器端，不能选服务端，不然地图会报ak无效
  script.onload = () => {
    // 使用script.onload，待资源加载完成，再初始化地图
    init();
  };
  let loadmap = document.getElementsByClassName("loadmap");
  if (loadmap) {
    // 每次append script之前判断一下，避免重复添加script资源标签
    for (var i = 0; i < loadmap.length; i++) {
      document.body.removeChild(loadmap[i]);
    }
  }

  document.body.appendChild(script);
};
</script>
<style lang="scss" scoped>
.all {
  width: 100%;
  height: 100%;
  #allmap {
    // 注意给dom宽高，不然地图不出来
    width: 100%;
    height: 100%;
  }
}
</style>
